<!DOCTYPE html>

<html lang="en" class="bg-dark">

<head>

    <meta charset="utf-8" />
    <title>Mr.Xiong博客系统</title>
    <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" href="__STATIC__/admin/hdjs/css/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="__STATIC__/admin/admin.ui/css/animate.css" type="text/css" />
    <link rel="stylesheet" href="__STATIC__/admin/admin.ui/css/app.css" type="text/css" />
    <!--[if lt IE 9]>

    <script src="__STATIC__/admin/admin.ui/js/ie/html5shiv.js"></script>

    <script src="__STATIC__/admin/admin.ui/js/ie/respond.min.js"></script>

    <script src="__STATIC__/admin/admin.ui/js/ie/excanvas.js"></script>

    <![endif]-->

</head>

<body class="">

<section id="content" class="m-t-lg wrapper-md animated fadeInUp">

    <div class="container aside-xxl">

        <a class="navbar-brand block" href="javascript:;">Mr.Xiong博客系统</a>

        <section class="panel panel-default bg-white m-t-lg">

            <header class="panel-heading text-center">

                <strong>管理员后台登陆</strong>

            </header>

            <form method="post" action="" class="panel-body wrapper-lg">

                <div class="form-group">

                    <label class="control-label">用户名</label>

                    <input type="text" class="form-control input-lg" name="username">

                </div>

                <div class="form-group">

                    <label class="control-label">密  码</label>

                    <input type="password" id="inputPassword" class="form-control input-lg" name="password">

                </div>

                <div id="embed-captcha"></div>
                <p id="wait" class="show">正在加载验证码......</p>
                <p id="notice" class="hide">请先完成验证</p>

                <!--<div class="form-group">-->

                    <!--<label class="control-label">验证码</label>-->

                    <!--<input  type="text" id="inputPassword" class="form-control input-lg col-md-6" name="code">-->

                    <!--<img src="{:captcha_src()}" onclick="this.src = this.src + '?' + Math.random()">-->

                <!--</div>-->

                <button type="submit" id="embed-submit" class="btn btn-primary">登陆后台</button>

            </form>
            <!--极验验证-->
            <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
            <script src="__STATIC__/admin/hdjs/js/gt.js"></script>
            <!--极验验证-->
            <script>
                var handlerEmbed = function (captchaObj) {
                    $("#embed-submit").click(function (e) {
                        var validate = captchaObj.getValidate();
                        if (!validate) {
                            $("#notice")[0].className = "show";
                            setTimeout(function () {
                                $("#notice")[0].className = "hide";
                            }, 2000);
                            e.preventDefault();
                        }
                    });
                    // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
                    captchaObj.appendTo("#embed-captcha");
                    captchaObj.onReady(function () {
                        $("#wait")[0].className = "hide";
                    });
                    // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
                };
                $.ajax({
                    // 获取id，challenge，success（是否启用failback）
                    url: "__STATIC__/admin/web/StartCaptchaServlet.php?t=" + (new Date()).getTime(), // 加随机数防止缓存
                    type: "get",
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        // 使用initGeetest接口
                        // 参数1：配置参数
                        // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
                        initGeetest({
                            gt: data.gt,
                            challenge: data.challenge,
                            new_captcha: data.new_captcha,
                            product: "embed", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                            offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                            // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
                        }, handlerEmbed);
                    }
                });
            </script>
        </section>

    </div>

</section>

<!-- footer -->

<footer id="footer">

    <div class="text-center padder">

        <p>

            <small>Powered By Mr.Xiong.com<br> copyright &copy; 2017</small>

        </p>

    </div>

</footer>

<!-- / footer -->

<script src="__STATIC__/admin/admin.ui/js/jquery.min.js"></script>

<!-- Bootstrap -->

<script src="__STATIC__/admin/admin.ui/js/bootstrap.js"></script>

<!-- App -->

<script src="__STATIC__/admin/admin.ui/js/app.js"></script>
<script src="__STATIC__/admin/admin.ui/js/slimscroll/jquery.slimscroll.min.js"></script>
<script src="__STATIC__/admin/admin.ui/js/app.plugin.js"></script>
</body>

</html>